<template>
  <!-- 模具寿命邮件发送记录主表表单弹窗 -->
  <div>
    <el-dialog
      v-model="visibleDialog"
      :title="props.title"
      width="80%"
      draggable
      @close="closeDialog"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :inline="true"
        :rules="rules"
        label-width="160"
      >
        <div class="formTable">
          <el-table
            :data="formData.details"
            style="width: 100%"
            :key="Math.random"
            border
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="100"
            />
            <el-table-column label="邮箱" props="email" min-width="100">
              <template #default="{ $index, row }">
                  {{ row.email }}
              </template>
            </el-table-column>
            <el-table-column
              label="发送人姓名"
              props="sendUserName"
              min-width="100"
            >
              <template #default="{ $index, row }">
                {{ row.sendUserName }}
              </template>
            </el-table-column>
            <el-table-column
              label="发送标题"
              props="sendTitle"
              min-width="100"
            >
              <template #default="{ $index, row }">
                {{ row.sendTitle }}
              </template>
            </el-table-column>
            <el-table-column
              label="发送内容"
              props="sendContent"
              min-width="350"
            >
              <template #default="{ $index, row }">
                {{ row.sendContent }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="!props.isReadonly"
            type="primary"
            :loading="loading"
            @click="handleSubmit"
          >确 定
          </el-button
          >
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import {useDictStoreHook} from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "EAMMOLDEAMMOULDEMAILRECORDADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

/** 弹窗显示 **/
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);

/** formData定义表单数据 */
const formRef = ref(ElForm);
let formData = reactive({
  id: "",
  configId: "",
  assetId: "",
  assetCode: "",
  assetName: "",
  sendStage: "",
  locationId: "",
  locationName: "",
  assetTypeId: "",
  assetTypeCode: "",
  assetTypeName: "",
  assetLifespan: "",
  cumulativeUseTimes: "",
  reminderScope: "",
  registrationTime: "",
  enabled: "",
  deleted: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  details: [
    {
      id: "",
      recordId: "",
      email: "",
      sendUserId: "",
      sendUserName: "",
      sendTitle: "",
      sendContent: "",
      enabled: "",
      deleted: "",
      createTime: "",
      createdUserId: "",
      createdUserName: "",
      lastUpdateTime: "",
      lastUpdatedUserId: "",
      lastUpdatedUserName: "",
    },
  ],
});

/** rules规则 */
const rules = reactive({
  configId: [
    {min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur"},
  ],
  assetId: [
    {min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur"},
  ],
  assetCode: [
    {min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur"},
  ],
  assetName: [
    {min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur"},
  ],
  sendStage: [],
  locationId: [
    {min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur"},
  ],
  locationName: [
    {min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur"},
  ],
  assetTypeId: [
    {min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur"},
  ],
  assetTypeCode: [
    {min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur"},
  ],
  assetTypeName: [
    {min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur"},
  ],
  assetLifespan: [],
  cumulativeUseTimes: [],
  reminderScope: [],
  registrationTime: [],
  enabled: [],
  deleted: [],
  createTime: [],
  createdUserId: [
    {min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur"},
  ],
  createdUserName: [
    {min: 1, max: 90, message: "长度在 1 到 90 个字符", trigger: "blur"},
  ],
  lastUpdateTime: [],
  lastUpdatedUserId: [
    {min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur"},
  ],
  lastUpdatedUserName: [
    {min: 1, max: 90, message: "长度在 1 到 90 个字符", trigger: "blur"},
  ],
  sonemail: [
    {min: 1, max: 90, message: "长度在 1 到 90 个字符", trigger: "blur"},
  ],
  sonsendUserId: [
    {min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur"},
  ],
  sonsendUserName: [
    {min: 1, max: 90, message: "长度在 1 到 90 个字符", trigger: "blur"},
  ],
  sonsendTitle: [
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"},
  ],
  sonsendContent: [
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"},
  ],
  sonenabled: [],
});

const isValidated = ref(false);
/** 删除行 */
const handleDelete = (index: any) => {
  formData.details.splice(index, 1);
  isValidated.value && formRef.value.validate(() => {
  });
};

const details = {
  id: "",
  recordId: "",
  email: "",
  sendUserId: "",
  sendUserName: "",
  sendTitle: "",
  sendContent: "",
  enabled: "",
  deleted: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
};

/** 添加行 */
const handleAdd = () => {
  let sondata = JSON.parse(JSON.stringify(details));
  formData.details.push(sondata);
};

/** 编辑时赋值 */
watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      Object.assign(formData, props.data);
      if (formData.id) {
        getdetails();
      }
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.details = [JSON.parse(JSON.stringify(details))];
  formData.id = "";
  formData.configId = "";
  formData.assetId = "";
  formData.assetCode = "";
  formData.assetName = "";
  formData.sendStage = "";
  formData.locationId = "";
  formData.locationName = "";
  formData.assetTypeId = "";
  formData.assetTypeCode = "";
  formData.assetTypeName = "";
  formData.assetLifespan = "";
  formData.cumulativeUseTimes = "";
  formData.reminderScope = "";
  formData.registrationTime = "";
  formData.enabled = "";
  formData.deleted = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
}

const loading = ref(false);

/** 模具寿命邮件发送记录主表保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      console.log("formData", toRaw(formData));
      await request({
        url: "/eam/eammouldemailrecord/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
      isValidated.value = false;
    } else {
      isValidated.value = true;
    }
  });
}

async function getdetails() {
  let sondetails = await request({
    url: "/eam/eammouldemailrecord/getDetails",
    method: "post",
    data: formData,
  }).finally(() => {
    loading.value = false;
  });
  formData.details = sondetails.data;
}
</script>

<style lang="scss" scoped>
h4 {
  font-weight: 400;
  color: #000;
  padding-left: 10px;
  font-size: 14px;
  line-height: 14px;
}

.formTable {
  :deep(.el-form-item) {
    margin-right: 0 !important;
  }
}

:deep(.el-dialog .el-dialog__body) {
  overflow-y: auto;
  height: 65vh;
}

:deep(.search-container .el-input.el-input--default.el-input--suffix) {
  // 固定宽度
  width: 190px !important;
}

:deep(.search-container .el-form-item--default .el-form-item__label) {
  // 固定宽度
  justify-content: end;
}
</style>
